<template>
  <div class="message-list-cont">
    <div class="mess-wrapper" v-for="(item, index) in messageCheckListSli" :key="index">
      <div class="mess-left">
        <div :class="item.isread == 0 ? 'bg blue' : 'bg grey'"></div>
        <div v-if="item.uid == loginPerson" style="width:100%">
          <div class="info" @click="goToDetail(item, index)" v-if="item.applyType == '请假'">
            <div v-if="item.state == '已驳回'">您的{{ item.applyType }}申请{{ item.approvaName }}{{ item.state }}</div>
            <div v-if="item.state == '审批中'">您有一条{{ item.applyType }}申请待审批</div>
            <div v-if="item.state != '已驳回' && item.state != '审批中'">您的{{ item.applyType }}申请{{ item.state }}</div>
            <div>
              <Row>
                <i-col span="7">
                  <div class="grey-font">开始时间：{{ item.startTime }} {{ item.startTimeSolt }}</div>
                </i-col>
                <i-col span="7">
                  <div class="grey-font">结束时间：{{ item.endTime }} {{ item.endTimeSolt }}</div>
                </i-col>
                <i-col span="7">
                  <div class="grey-font">{{ item.applyType }}类型：{{ item.detail }}</div>
                </i-col>
              </Row>
            </div>
            <div class="grey-font" v-if="item.reason">{{ item.applyType }}事由：{{ item.reason }}</div>

          </div>
          <div class="info" @click="goToDetail(item, index)" v-if="item.applyType == '外出'">
            <div v-if="item.state == '已驳回'">您的{{ item.applyType }}申请{{ item.approvaName }}{{ item.state }}</div>
            <div v-if="item.state == '审批中'">您有一条{{ item.applyType }}申请待审批</div>
            <div v-if="item.state != '已驳回' && item.state != '审批中'">您的{{ item.applyType }}申请{{ item.state }}</div>

            <div>
              <Row>
                <i-col span="7">
                  <div class="grey-font">开始时间：{{ item.startTime.substring(0, 16) }}</div>
                </i-col>
                <i-col span="7">
                  <div class="grey-font">结束时间：{{ item.endTime.substring(0, 16) }}</div>
                </i-col>
                <i-col span="7">
                  <div class="grey-font">{{ item.applyType }}类型：{{ item.detail }}</div>
                </i-col>
              </Row>
            </div>
            <div class="grey-font" v-if="item.reason">{{ item.applyType }}事由：{{ item.reason }}</div>

          </div>
          <div class="info" @click="goToDetail(item, index)" v-if="item.applyType == '补卡'">
            <div v-if="item.state == '已驳回'">您的{{ item.applyType }}申请{{ item.approvaName }}{{ item.state }}</div>
            <div v-if="item.state == '审批中'">您有一条{{ item.applyType }}申请待审批</div>
            <div v-if="item.state != '已驳回' && item.state != '审批中'">您的{{ item.applyType }}申请{{ item.state }}</div>

            <div>
              <Row>
                <i-col span="7">
                  <div class="grey-font">上班补卡时间：{{ item.clockInDate }} {{ item.clockInTime }}</div>
                </i-col>
                <i-col span="7">
                  <div class="grey-font">下班补卡时间：{{ item.clockOutDate }} {{ item.clockOutTime }}</div>
                </i-col>
                <i-col span="7">
                  <div class="grey-font">{{ item.applyType }}类型：{{ item.detail }}</div>
                </i-col>
              </Row>
            </div>
            <div class="grey-font" v-if="item.reason">{{ item.applyType }}事由：{{ item.reason }}</div>

          </div>
        </div>
        <div v-else style="width:100%">
          <div class="info" @click="goToDetail(item, index)" v-if="item.applyType == '请假'">
            <div v-if="item.state == '已驳回'">{{ item.uidname }}的{{ item.applyType }}申请{{ item.approvaName }}{{ item.state }}
            </div>
            <div v-if="item.state == '审批中'">{{ item.uidname }}的{{ item.applyType }}申请待审批</div>
            <div v-if="item.state != '已驳回' && item.state != '审批中'">{{ item.uidname }}的{{ item.applyType }}申请{{ item.state }}
            </div>
            <div>
              <Row>
                <i-col span="7">
                  <div class="grey-font">开始时间：{{ item.startTime }} {{ item.startTimeSolt }}</div>
                </i-col>
                <i-col span="7">
                  <div class="grey-font">结束时间：{{ item.endTime }} {{ item.endTimeSolt }}</div>
                </i-col>
                <i-col span="7">
                  <div class="grey-font">{{ item.applyType }}类型：{{ item.detail }}</div>
                </i-col>
              </Row>
            </div>
            <div class="grey-font" v-if="item.reason">{{ item.applyType }}事由：{{ item.reason }}</div>

          </div>
          <div class="info" @click="goToDetail(item, index)" v-if="item.applyType == '外出'">
            <div v-if="item.state == '已驳回'">{{ item.uidname }}的{{ item.applyType }}申请{{ item.approvaName }}{{ item.state }}
            </div>
            <div v-if="item.state == '审批中'">{{ item.uidname }}的{{ item.applyType }}申请待审批</div>
            <div v-if="item.state != '已驳回' && item.state != '审批中'">{{ item.uidname }}的{{ item.applyType }}申请{{ item.state }}
            </div>

            <div>
              <Row>
                <i-col span="7">
                  <div class="grey-font">开始时间：{{ item.startTime.substring(0, 16) }}</div>
                </i-col>
                <i-col span="7">
                  <div class="grey-font">结束时间：{{ item.endTime.substring(0, 16) }}</div>
                </i-col>
                <i-col span="7">
                  <div class="grey-font">{{ item.applyType }}类型：{{ item.detail }}</div>
                </i-col>
              </Row>
            </div>
            <div class="grey-font" v-if="item.reason">{{ item.applyType }}事由：{{ item.reason }}</div>

          </div>
          <div class="info" @click="goToDetail(item, index)" v-if="item.applyType == '补卡'">
            <div v-if="item.state == '已驳回'">{{ item.uidname }}的{{ item.applyType }}申请{{ item.approvaName }}{{ item.state }}
            </div>
            <div v-if="item.state == '审批中'">{{ item.uidname }}的{{ item.applyType }}申请待审批</div>
            <div v-if="item.state != '已驳回' && item.state != '审批中'">{{ item.uidname }}的{{ item.applyType }}申请{{ item.state }}
            </div>

            <div>
              <Row>
                <i-col span="7">
                  <div class="grey-font">上班补卡时间：{{ item.clockInDate }} {{ item.clockInTime }}</div>
                </i-col>
                <i-col span="7">
                  <div class="grey-font">下班补卡时间：{{ item.clockOutDate }} {{ item.clockOutTime }}</div>
                </i-col>
                <i-col span="7">
                  <div class="grey-font">{{ item.applyType }}类型：{{ item.detail }}</div>
                </i-col>
              </Row>
            </div>
            <div class="grey-font" v-if="item.reason">{{ item.applyType }}事由：{{ item.reason }}</div>

          </div>
        </div>

      </div>
      <div class="mess-right grey-font">{{ item.createTime.substring(0, 16) }}</div>
    </div>
    <div class="message-page">
      <Page v-show="messageCheckList.length > 0" @on-change="changePage" :current="currentPage" :total="total"
        :page-size="pageSize" />
    </div>
    <div class="tc" v-show="messageCheckList.length == 0">暂无通知</div>

  </div>
</template>
<script>
export default {
  name: 'messCheck',
  props: ["messageCheckList", "currentPart"],
  data() {
    return {
      messageCheckListSli: [],
      currentPage: 1,
      pageSize: 10,
      total: 1,
      loginPerson: ''
    };
  },
  methods: {
    goToDetail(item, index) {
      let applyNo = [];
      applyNo.push(item.applyNo)
      let obj = {
        type: 4,
        idList: item.applyNo
      }
      this.api.updateWorkDiaryReadNotice(obj).then(res => {
        console.log(res)
        this.$store.commit('messageHasChangedFreshedQuickly', 'check' + item.applyNo);

        if (item.uid != this.loginPerson) {
          //先置为已读，再跳转
          this.$router.push({
            path: '/U/systemManagement/approvalDetails',
            query: {
              item: item,
              // Object:1
            }
          })
        } else {
          //先置为已读，再跳转
          this.$router.push({
            path: '/U/systemManagement/applicationDetails',
            query: {
              item: item,
              // Object:1
            }
          })
        }
      })

    },
    changePage(num) {
      this.currentPage = num
      this.messageCheckListSli = this.messageCheckList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)

    }

  },
  // computed: {
  //   currentPart(){
  //       if(this.currentPart == "messageCheck"){
  //           this.messageCheckListSli = this.messageCheckList.slice((this.currentPage-1)*this.pageSize, this.currentPage*this.pageSize)
  //       }
  //   },
  // },
  watch: {
    messageCheckList() {
      this.total = this.messageCheckList ? this.messageCheckList.length : 0
      this.messageCheckListSli = this.messageCheckList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)

    }
  },
  mounted() {
    this.loginPerson = sessionStorage.getItem('useragentcode')
    console.log("check")

    console.log("0", this.messageCheckList)
    this.currentPage = 1
    this.total = this.messageCheckList ? this.messageCheckList.length : 0
    this.messageCheckListSli = this.messageCheckList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)

  }
};
</script>
<style lang="less">@import "../index.less";</style>